<template>
  <el-dialog
    title="告警列表"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <div class="table-all">
      <!-- 搜索区 -->
      <div class="app-container search-box">
        <SearchForm
          :form="searchData.form"
          :options="searchData.options"
          @searchUpdate="search"
          @resetSearchData="resetSearchData"
        ></SearchForm>
      </div>
      <!-- 按钮区 -->
      <div class="app-container table-box">
        <div class="table-main">
          <!-- 表格 -->
          <v-table
            :table-columns="tableColumns"
            :table-data="tableData"
            :loading="loading"
            :is-index="true"
            ref="table"
            :needComputedHeight="false"
            height="295px"
          >
            <template #alarmType="scope">
              {{ getDictValue(scope.row.alarmType, alarmTypeOptions) }}
            </template>
            <template #handled="scope">
              {{ getDictValue(scope.row.handled, disposeStatusOptions) }}
            </template>
            <template #isTimeout="scope">
              {{ getDictValue(scope.row.isTimeout, isTimeoutOptions) }}
            </template>
          </v-table>
        </div>
        <div class="table-page">
          <!-- 页码 -->
          <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="search"/>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    alarmRecordPage,
    alarmRecordExport,
    alarmRecordDelete,
    orderPush
  } from '@/api/alarm/record'
  import SearchForm from '@/components/searchForm'
  import ButtonForm from '@/components/ButtonForm'
  import VTable from '@/components/VTable'
  import Pagination from '@/components/Pagination'

  export default {
    components: {
      VTable, Pagination, SearchForm, ButtonForm
    },
    props: {
      width: {
        type: String,
        default: "70%",
      },
      modeType: {
        type: String,
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      searchParams:{

      }
    },
    watch: {
      // 字典
      'alarmTypeOptions': {
        handler(newVal, oldVal) {
          this.searchData.options.forEach(t => {
            if (t.key == 'alarmType') {
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'alarmSourceOptions': {
        handler(newVal, oldVal) {
          this.searchData.options.forEach(t => {
            if (t.key == 'alarmSource') {
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      disposeStatusOptions: {
        handler(newVal, oldVal) {
          this.searchData.options.forEach((t) => {
            if (t.key == "handled") {
              t.option.data = newVal;
            }
          });
        },
        deep: true,
        immediate: true,
      },
      'isTimeoutOptions':{
        handler(newVal, oldVal) {
          this.searchData.options.forEach(t => {
            if (t.key == 'isTimeout') {
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      }
    },
    data() {
      return {
        tableColumns: [
          {
            prop: 'facilityName',
            label: '设施名称',
            minWidth: '150',
            slotname: 'facilityName',
            options: {}
          },
          {
            prop: 'pointName',
            label: '监测点名称',
            minWidth: '150',
            slotname: 'pointName',
            options: {}
          },
          {
            prop: 'equipmentName',
            label: '设备名称',
            minWidth: '150',
            slotname: 'equipmentName',
            options: {}
          },
          {
            prop: 'alarmName',
            label: '报警名称',
            minWidth: '150',
            slotname: 'alarmName',
            options: {}
          },
          {
            prop: 'alarmPosition',
            label: '报警部位',
            minWidth: '150',
            slotname: 'alarmPosition',
            options: {}
          },
          {
            prop: 'firstAlarmTime',
            label: '初次报警时间',
            minWidth: '150',
            slotname: 'firstAlarmTime',
            options: {}
          },
          {
            prop: 'alarmEndTime',
            label: '报警结束时间',
            minWidth: '150',
            slotname: 'alarmEndTime',
            options: {}
          },
          // {
          //   prop: 'alarmType',
          //   label: '报警类型',
          //   minWidth: '150',
          //   slotname: 'alarmType',
          //   options: {}
          // },
          {
            prop: 'alarmAddress',
            label: '报警地址',
            minWidth: '150',
            slotname: 'alarmAddress',
            options: {}
          },
          {
            prop: 'areaCode',
            label: '区域',
            minWidth: '150',
            slotname: 'areaCode',
            options: {}
          },
          {
            prop: 'handled',
            label: '处置状态',
            minWidth: '150',
            slotname: 'handled',
            options: {}
          },
          {
            prop: 'isTimeout',
            label: '是否按时处置',
            minWidth: '150',
            slotname: 'isTimeout',
            options: {}
          },
          {
            prop: 'handledName',
            label: '处置人',
            minWidth: '150',
            slotname: 'handledName',
            options: {}
          },
          {
            prop: 'handleTime',
            label: '处置时间',
            minWidth: '150',
            slotname: 'handleTime',
            options: {}
          },
          {
            prop: 'handleSituation',
            label: '处置情况',
            minWidth: '150',
            slotname: 'handleSituation',
            options: {}
          },
        ],
        tableData: [],
        selection: [],
        loading: false,
        total: 1,
        pageNum: 1,
        pageSize: 10,
        searchData: {
          form: {
            identificationCode: '',
            facilityName: '',
            pointId: '',
            pointName: '',
            deviceId: '',
            equipmentName: '',
            alarmCode: '',
            alarmName: '',
            alarmPosition: '',
            monitorItem: '',
            firstAlarmNum: '',
            nowAlarmNum: '',
            firstAlarmTime: '',
            firstAlarmTimeRange: '',
            nowAlarmTime: '',
            nowAlarmLevel: '',
            maxAlarmNum: '',
            maxAlarmTime: '',
            maxAlarmLevel: '',
            alarmEndTime: '',
            alarmSource: '',
            alarmType: '',
            alarmAddress: '',
            lon: '',
            lat: '',
            provinceCode: '',
            cityCode: '',
            countyCode: '',
            areaCode: '',
            handled:'',
            isTimeout:'',
            selectAreaCode:[],
          },
          options: [
            {
              title: '设施名称',
              key: "facilityName",
              type: "text",
            },
            {
              title: '报警来源',
              key: "alarmSource",
              type: "select",
              multiple: false,
              option: {
                data: this.alarmSourceOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            // {
            //   title: '报警类型',
            //   key: "alarmType",
            //   type: "select",
            //   multiple: false,
            //   option: {
            //     data: this.alarmTypeOptions,
            //     props: {
            //       key: "id", // 指定key对应data的字段
            //       label: "label", // 指定label对应data的字段
            //       value: "value", // 指定value对应data的字段
            //     },
            //   },
            // },
            {
              title: '初次报警时间',
              key: "firstAlarmTimeRange",
              type: "date-to-date",
            },
            // {
            //   title: "区域",
            //   key: "selectAreaCode",
            //   type: "gdAreaSelect",
            //   changeFn: this.searchAreacodeHandle, //如需对区域数据做更多的处理，可在这里定义方法
            // },
            {
              title: "处置状态",
              key: "handled",
              type: "select",
              multiple: false,
              option: {
                data: this.disposeStatusOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            {
              title: "是否按时处置",
              key: "isTimeout",
              type: "select",
              multiple: false,
              option: {
                data: this.isTimeoutOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
          ]
        },
        modeTypeOptions: [],
        alarmTypeOptions: [],
        alarmSourceOptions: [],
        notifyStatusOptions: [],
        disposeStatusOptions:[],
        isTimeoutOptions:[],
        superviseStateOptions:[],
      };
    },
    methods: {
      cancel() {
        this.close()
      },
      handleClose(done) {
        done()
        this.close()
      },
      getDictValue(value, option) {
        let item = option.find(t => t.value == value)
        if (item != undefined) {
          return item.label
        }
        return value
      },
      getDictValueId(value, option) {
        let item = option.find(t => t.id == value)
        if (item != undefined) {
          return item.name
        }
        return value
      },
      close() {
        this.$emit('close')
      },
      getData() {
        // 获取字典值
        this.alarmSourceOptions = [];
        this.$commonJs.filterDataDict("alarmSource", this.alarmSourceOptions)
        //报警类型
        // let recordType = this.$commonJs.getAlarmPathConfig(this.$route.path).recordType
        // //alarmRecordType
        // this.alarmTypeOptions = [];
        // this.$commonJs.filterDataDict(recordType, this.alarmTypeOptions)

        this.disposeStatusOptions = []
        this.$commonJs.filterDataDict("disposeStatus", this.disposeStatusOptions)

        this.isTimeoutOptions = []
        this.$commonJs.filterDataDict("alarmIsTimeout", this.isTimeoutOptions)

        this.superviseStateOptions = []
        this.$commonJs.filterDataDict("superviseState",this.superviseStateOptions )
        this.search()
      },
      search() {
        this.fetch({
          ...this.searchData.form,
        })
      },
      fetch(params = {}) {
        params.pageSize = this.pageSize
        params.pageNum = this.pageNum
        params.areaCode = this.$store.state.account.user.deptIds
        params.startTime = this.searchParams.startTime+ " 00:00:00",
        params.endTime = this.searchParams.endTime+" 23:59:59",
        this.loading = true
        alarmRecordPage(params).then(async res => {
          if (res.code == 200) {
            this.total = res.data.total
            let rows = res.data.rows
            for(let item of rows){
              item.areaCode = await this.$commonJs.getGzAreaName(item.provinceCode, item.cityCode, item.countyCode)
            }
            this.tableData = rows
          } else {
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        }).finally(final => {
          this.loading = false
        })
      },
      // 重置搜索条件
      resetSearchData() {
        this.searchData.form = {
          // modeType: this.modeType,
          identificationCode: '',
          facilityName: '',
          pointId: '',
          pointName: '',
          deviceId: '',
          equipmentName: '',
          alarmCode: '',
          alarmName: '',
          alarmPosition: '',
          monitorItem: '',
          firstAlarmNum: '',
          nowAlarmNum: '',
          firstAlarmTime: '',
          firstAlarmTimeRange:'',
          nowAlarmTime: '',
          nowAlarmLevel: '',
          maxAlarmNum: '',
          maxAlarmTime: '',
          maxAlarmLevel: '',
          alarmEndTime: '',
          alarmSource: '',
          alarmType: '',
          handled:'',
          alarmAddress: '',
          lon: '',
          lat: '',
          provinceCode: '',
          cityCode: '',
          countyCode: '',
          areaCode: '',
          selectAreaCode: [],
          isTimeout:''
        }
      },
    },
    mounted() {

    },
  };
</script>

<style lang="scss" scoped>
  .table-all {
    display: flex;
    flex-direction: column;
    height: 100%;

    .search-box {
      padding-bottom: 6px;
    }

    .table-box {
      padding-top: 10px;
      flex: 1;
      display: flex;
      flex-direction: column;

      .table-main {
        flex: 1;
        overflow: auto;
      }

      .table-page {
        // padding-top: 10 px;
        // padding-bottom: 10 px;
      }

      ::v-deep .pagination-container {
        text-align: right;
      }

    }
  }
</style>
